<template>
  <div class="tags">
    <el-card>
      <div class="tags-top">
        <el-form :inline="true" :model="tagsForm">
          <el-form-item label="标签名称">
            <el-input v-model="tagsForm.tagName" size="small"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="tagsForm.state"
              placeholder="请选择"
              size="small"
            >
              <el-option label="启用" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="reset">清除</el-button>
            <el-button size="small" type="primary" @click="searchTag"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <div>
          <el-button icon="el-icon-edit" size="small" type="success" @click="showDialog()"
            >新增标签</el-button
          >
        </div>
      </div>
      <el-alert type="info" :closable="false" show-icon
        >数据一共 {{ counts }} 条</el-alert
      >
      <el-table style="width: 100%; margin: 10px 0" :data="tagsData">
        <el-table-column type="index" label="序号" width="80px">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="tagName" label="标签名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template #default="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" >
          <template #default="{ row }">
            {{row.state===1?'已启用':'已禁用'}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="handleState(row)">{{
              row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button type="text" :disabled="row.state === 1" @click="showDialog(row)">修改</el-button>
            <el-button
              type="text"
              :disabled="row.state === 1"
              @click="delTags(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(tagsForm.page)"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="Number(tagsForm.pagesize)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(counts)"
      >
      </el-pagination>
    </el-card>
    <TagsAdd ref="handleTags" @update="getTagsList()" :editData="editData"></TagsAdd>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/tags.js'
import TagsAdd from '@/module-hmmm/components/tags-add'

export default {
  name: 'Tags',
  components: {
    TagsAdd
  },
  data () {
    return {
      editData: {},
      tagsForm: {
        page: 1,
        pagesize: 10,
        state: null,
        tagName: null
      },
      tagsData: [],
      counts: 0
    }
  },
  created () {
    this.getTagsList()
  },
  methods: {
    searchTag () {
      this.tagsForm.page = 1
      this.getTagsList()
    },

    reset () {
      this.tagsForm = {
        page: 1,
        pagesize: 10,
        state: null,
        tagName: null
      }
      this.getTagsList()
    },

    async getTagsList () {
      const res = await list(this.tagsForm)
      this.tagsData = res.data.items
      this.counts = res.data.counts
    },

    handleSizeChange (val) {
      this.tagsForm.pagesize = val
      this.tagsForm.page = 1
      this.getTagsList()
    },

    handleCurrentChange (val) {
      this.tagsForm.page = val
      this.getTagsList()
    },

    // 删除标签
    delTags (tags) {
      this.$confirm('是否永久删除该标签?', '提示')
        .then(async () => {
          await remove({ id: tags })
          this.$message.success('删除成功')
          this.getTagsList()
        })
        .catch(() => {
          this.$message.error('删除失败')
        })
    },

    // 切换状态
    async handleState (tag) {
      await changeState({
        id: tag.id,
        state: tag.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      tag.state = tag.state === 1 ? 0 : 1
    },

    showDialog (data = {}) {
      this.editData = data
      this.$nextTick(() => {
        this.$refs.handleTags.openDialog()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.tags {
  padding: 20px;
  .tags-top {
    display: flex;
    justify-content: space-between;
  }
}
</style>
